<!--
 * @Date: 2021-10-24 15:43:41

 * @LastEditors: XuMeiyi
 * @LastEditTime: 2021-11-05 17:19:57
 * @Description: 
>>>>>>> b982b0480ce060ffd4ea0eb844e887bb8d6d1272
-->
<template>
<div>
    <!-- 查询开始 -->
    <!-- 按需选择产品的输入框 -->
    <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item>
            <el-select v-model="form.status" placeholder="状态" clearable>
                <el-option label="未审核" value="未审核"></el-option>
                <el-option label="审核通过" value="审核通过"></el-option>
                <el-option label="审核不通过" value="审核不通过"></el-option>
                <el-option label="推荐" value="推荐"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-input v-model="form.title" placeholder="标题" clearable></el-input>
        </el-form-item>
        <el-form-item>
            <el-select v-model="form.categoryId" placeholder="请选择栏目" clearable>
                <el-option :label="item.name" :value="item.id" v-for="item in classify" :key="item.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="toSearch">查询</el-button>
        </el-form-item>
        <el-button type="primary" style="float: right" @click="releaseCategory">发布咨询</el-button>
    </el-form>
    <!-- 查询结束 -->

    <!-- 表格开始 -->
    <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column type="index" :index="1"> </el-table-column>
        <el-table-column prop="cover" label="封面" width="240">
            <template slot-scope="scope">
                <el-image slot="reference" style="width: 160px; height: 100px" :src="scope.row.cover"></el-image>
            </template>
        </el-table-column>
        <el-table-column label="风采">
            <template slot-scope="scope">
                <span label="标题" style="font-weight: 600">{{
            scope.row.title
          }}</span><br />
                <span label="作者">{{ scope.row.baseUser.realname }}</span><br />
                <span label="栏目名">{{ scope.row.category.name }}</span><br />
                <span label="发表时间">{{
            moment(scope.row.publishTime).format("YYYY-MM-DD")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag
            type="success"
            v-if="scope.row.status === '审核通过'"
            class="tag"
            >审核通过</el-tag
          >
          <el-tag
            type="warning"
            v-else-if="scope.row.status === '未审核'"
            class="tag"
            >未审核</el-tag
          >
          <el-tag type="danger" v-else class="tag">审核失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            style="color: green"
            @click="toRecommend(scope.row.id, '推荐')"
            class="button"
            >推荐</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="toCheck(scope.row)"
            class="button"
            >审核</el-button
          >
          <el-button type="text" size="small" style="color: red" class="button"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格结束 -->

    <!-- 分页开始 -->
    <div class="page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 分页结束 -->

    <!-- 审核模态框开始 -->
    <el-dialog title="审核风采信息" :visible.sync="visible" class="modal">
      <el-form v-model="message">
        <!-- 文章标题 -->
        <div style="font-weight: 600; font-size: 18px; text-align: center">
          {{ message.title }}
        </div>
        <!-- 文章内容 -->
        <span v-html="message.content">{{ message.content }}</span>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="info" @click="toChangeStatus(message.id, '审核不通过')"
          >审核不通过</el-button
        >
        <el-button
          type="primary"
          @click="toChangeStatus(message.id, '审核通过')"
          >审核通过</el-button
        >
      </span>
    </el-dialog>
    <!-- 审核模态框结束 -->
</div>
</template>

<script>
let moment = require("moment");
import { findAllCategory, pageQuery, changeStatus } from "@/api/information";
// import { post } from "@/utils/request";

export default {
    data() {
        return {
            form: {},
            tableData: [],
            classify: [],
            params: {
                page: 1,
                pageSize: 5,
            },
            total: 0,
            loading: false,
            visible: false,
            message: {},
        };
    },
    methods: {
        //挂载moment
        moment,
        //查询咨询分类中的栏目分类
        async findAllClassify() {
            let res = await findAllCategory();
            this.classify = res.data;
            this.loading = true;
            let temp = {
                ...this.params,
                ...this.form
            };
            for (let key in temp) {
                if (!temp[key]) {
                    delete temp[key];
                }
            }
            let response = await pageQuery(temp);
            this.tableData = response.data.list;
            this.total = response.data.total;
            this.loading = false;
        },
        //查询按钮绑定事件
        toSearch() {
            this.findAllClassify();
            this.params.page = 1;
        },
        //分页查询所有的咨询信息
        async findAllInformation() {
            this.loading = true;
            let temp = {
                ...this.params
            };
            let res = await pageQuery(temp);
            this.tableData = res.data.list;
            this.total = res.data.total;
            this.loading = false;
        },
        //处理每页显示的条数
        handleSizeChange(pageSize) {
            this.params.pageSize = pageSize;
        },
        //处理每页显示的页码
        handleCurrentChange(page) {
            this.params.page = page;
        },
        //推荐按钮绑定事件
        toRecommend(row, text) {
            if (text == "推荐") {
                row.status = "推荐";
            }
        },
        //点击审核绑定事件
        toCheck(row) {
            // console.log(row);
            this.visible = true;
            this.message = {
                ...row
            };
        },
        //审核模态框中的通过按钮绑定事件
        passHandler(message) {
            message.status = "审核通过";
            this.visible = false;
            this.findAllInformation();
        },
        //审核模态框中的不通过按钮绑定事件
        noPassHandler(message) {
            message.status = "审核失败";
            this.visible = false;
            this.findAllInformation();
        },
        //发布咨询绑定事件
        releaseCategory() {
            this.$router.push({
                path: "/release/index",
            });
        },
        //推荐按钮绑定事件
    toRecommend(id, status) {
      this.$confirm("是否要推荐该资讯?", "推荐咨询", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await changeStatus({ id, status });
          this.$message({
            type: "success",
            message: res.message,
          });
          this.findAllInformation();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //点击审核绑定事件
    toCheck(row) {
      // console.log(row);
      this.visible = true;
      this.message = row;
    },
    //审核模态框中的通过按钮和不通过按钮绑定事件
    async toChangeStatus(id, status) {
      let data = { id, status };
      let res = await changeStatus(data);
      this.$message({
        type: "success",
        message: res.message,
      });
      this.visible = false;
      this.findAllInformation();
    },
    //发布咨询绑定事件
    releaseCategory() {
      this.$router.push({
        path: "/release/index",
      });
    },
    },
    created() {
    this.findAllClassify();
    this.findAllInformation();
  },
    watch: {
        params: {
            handler() {
                this.findAllInformation();
            },
            deep: true,
        },
    },
  

 
   
};
</script>

<style lang="less" scoped>
</style>
